<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">
		<title>注册</title>
		<script src="../js/jquery-1.10.2.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/style.css"/>
		<link rel="stylesheet" type="text/css" href="../css/login.css"/>
		<style type="text/css">
			.login-box{
				position: absolute;
				width: 900px;
				height: 550px;
				background: rgba(14, 8, 8, 0.88);
				left: 50%;
				top: 50%;
				margin-left: -450px;
				margin-top: -275px;
				border-radius: 20px;
				/* margin-top: -250px; */
			}
			.login-left{
				position: relative;
				float: left;
				width: 300px;
				height: 550px;
				
			}
			.login-left img{
				margin-left:60px;
				margin-top: 160px;
			}
			.login-left a{
				margin-left: 20px;
			}
			.login-left a img{
				margin-left:60px;
				margin-top: 40px;
			}
			.login-left a span{
				display: inline-block;
				height: 25px;
				line-height: 25px;
				position: relative;
				top: -5px;
				font-size: 20px;
				margin-left: 12px;
			}
			.login-right{
				position: relative;
				float: left;
				width: 450px;
				height: 550px;
				padding-top: 140px;
				box-sizing: border-box;
			}
			
			.login-right p{
				line-height: 80px;
				text-align: center;
			}
			.login-right p input{
				width: 300px;
				height: 50px;
				border-radius: 20px;
				outline: none;
				border: none;
				background-color: transparent;
				color: #FFFFFF;
				border: 2px solid #FFFFFF;
				padding-left: 20px;
				box-sizing: border-box;
			}
			#but{
				background-color: #FFFFFF;
				color: #424242;
				height: 40;
				line-height: 40px;
				margin: auto;
				margin-top: 20px;
				width: 300px;
				border-radius: 20px;
				cursor: pointer;
			}
			.res{
				color: #FFFFFF;
			}
			.res a{
				color: blue;
			}
		</style>
	</head>
	<body>
			<div class="login-box">
				<div class="login-left">
					
					<a href="index.html">
						<img src="https://xiangyuanhui.oss-cn-hangzhou.aliyuncs.com/fenghuang/login/return.png" />
						<span>返回首页</span>
					</a>
				</div>
				<div class="login-right">
					<p><input type="text" placeholder="请输入账号" class="input1"></p>
					<p><input type="password" placeholder="密码" class="input2"></p>
					<p id="but" class="but">注册</p>
					<p class="res">已有账号？<a href="./login.html">前往登录</a></p>
				</div>
			</div>
				
	<script>
		$(function(){
			$('.but').click(function(){
				var input1 = $('.input1').val()
				var input2 = $('.input2').val()
				$.ajax({
				  type:"post",
				  url:"../server/res.php",
				  dataType:'json',
				  data:{
				    username: input1,
				    password: input2
				  },
				  success:function(data){
				    console.log(data)
				    if(data[2]=='注册成功'){
				        alert('添加成功');
				        window.location.href="login.html"
				    }else{
				        alert('用户名已存在');
				    }
				  },
				  error:function(err){
				    console.log(err)
					alert('网络错误')
				  },
				})
			})
		})
	</script>
	</body>
</html>